// import { DingdingOutlined } from '@ant-design/icons';
import { Button, Card, Result, Form, Input, Divider, List } from 'antd';
import { connect } from 'umi';
import React, { useState, useEffect } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import styles from './index.less';
interface IAccessCode {
  accessCode: String
}
interface IProps {
  history: {
    push: Function
  },
  match: { params: { state: String } }
}
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 9 },
};
const verification = (props: IProps) => {

  const [form] = Form.useForm();
  const [statusValue, setStatusValue] = useState<String>('true')
  const onFinish = (values: IAccessCode) => {
    console.log(values.accessCode);
  };

  const onReset = () => {
    props.history.push('/visitorList');
  };
  useEffect(() => {
    setStatusValue(props.match.params.state)
  }, [])
  return (
    <>
      <GridContent>
        <Card bordered={false} className={styles.grounding}>
          {statusValue === 'true' ? (<div className={styles.successful}>
            <div className={styles.successfulCheck}>
              <Card bordered={false}>
                <List grid={{ gutter: 16, column: 4 }} className={styles.successfulValidation}>
                  <List.Item>
                    <Card className={styles.picture}>
                      <img style={{ width: '100%' }} src={`http://deeplor.oss-cn-hangzhou.aliyuncs.com/upload/image/20200817/854e620c6e674705b53227829523ddfd.jpg`} />
                    </Card>
                  </List.Item>
                  <List.Item>
                    {/* <Card bordered={false}> */}
                    <Result
                      status="success"
                      title={'验证成功'}
                      style={{ paddingBottom: 0 }}
                    >
                    </Result>
                    {/* </Card> */}
                  </List.Item>
                  <List.Item>
                    <Card className={styles.picture}>
                      <img style={{ width: '100%' }} src={`http://deeplor.oss-cn-hangzhou.aliyuncs.com/upload/image/20200819/f28d6ae445974530b33a5504ec2b15d1.png`} />
                    </Card>
                  </List.Item>
                </List>
              </Card>
              <div className={styles.cardInformation}>
                <ProDescriptions column={1} style={{ marginTop: '-22px' }}>
                  <ProDescriptions.Item key="visitors.visitorName" style={{ paddingLeft: '15%' }}>{'李斌斌'}</ProDescriptions.Item>
                  <ProDescriptions.Item key="visitors.visitorIdCard" label="住址">{'广东省佛山'}</ProDescriptions.Item>
                  <ProDescriptions.Item key="visitors.visitorPhone" label="身份证">{'735734759374432583'}</ProDescriptions.Item>
                  <ProDescriptions.Item key="visitors.visitorCompany" label="有效期">{'2026年***月10日'}</ProDescriptions.Item>
                </ProDescriptions>
              </div>
            </div>
            <div className={styles.successfulTemporary}>
              <Card bordered={false}>
                <div style={{ width: '30em', height: '11em', margin: '0 auto' }}>
                  <ProDescriptions column={2} style={{ marginTop: '-22px' }}>
                    <ProDescriptions.Item key="visitors.visitorName" label="访客姓名">{'李斌斌'}</ProDescriptions.Item>
                    <ProDescriptions.Item key="visitors.visitorIdCard" label="身份证号">{'735734759374583'}</ProDescriptions.Item>
                    <ProDescriptions.Item key="visitors.visitorPhone" label="手机号">{'13176238723'}</ProDescriptions.Item>
                    <ProDescriptions.Item key="visitors.visitorCompany" label="所属公司">{'航泰科技有限公司'}</ProDescriptions.Item>
                    <ProDescriptions.Item label="受访人姓名">{'李彤'}</ProDescriptions.Item>
                    <ProDescriptions.Item label="受访人手机号">{'13978346798'}</ProDescriptions.Item>
                    <ProDescriptions.Item label="受访人公司" >{'海康科技'}</ProDescriptions.Item>
                    <ProDescriptions.Item label="受访人部门" >{'研发部'}</ProDescriptions.Item>
                  </ProDescriptions>
                </div>
                <Form {...layout} form={form} name="control-hooks" style={{ marginTop: '6em' }} onFinish={onFinish}>
                  <Form.Item name="accessCode" rules={[{ required: true, message: '请输入出入临时号码！' }]} className={styles.accessCode}>
                    <Input style={{ width: '20em' }} size={'middle'} placeholder="请输出入临时号码" />
                  </Form.Item>
                  <Form.Item className={styles.validation_button}>
                    <div>
                      <Button onClick={onReset}>
                        关闭
              </Button>
                      <Divider type="vertical" />
                      <Divider type="vertical" />
                      <Button type="primary" htmlType="submit">
                        提交
              </Button>
                    </div>
                  </Form.Item>
                </Form>
              </Card>
            </div>

          </div>) :
            (<div>
              <Card bordered={false}>
                <Card bordered={false} className={styles.success_padding}>
                  <List grid={{ gutter: 16, column: 4 }} className={styles.validation}>
                    <List.Item>
                      <Card className={styles.picture}>
                        <img style={{ width: '100%' }} src={`http://deeplor.oss-cn-hangzhou.aliyuncs.com/upload/image/20200817/854e620c6e674705b53227829523ddfd.jpg`} />
                      </Card>
                    </List.Item>
                    <List.Item>
                      <Card bordered={false}>
                        <Result
                          status="error"
                          title={'验证成功'}
                          style={{ paddingBottom: 0 }}
                        >
                        </Result>
                      </Card>
                    </List.Item>
                    <List.Item>
                      <Card className={styles.picture}>
                        <img style={{ width: '100%' }} src={`http://deeplor.oss-cn-hangzhou.aliyuncs.com/upload/image/20200819/f28d6ae445974530b33a5504ec2b15d1.png`} />
                      </Card>
                    </List.Item>
                  </List>
                </Card>
                <div className={styles.cardInformation}>
                  <ProDescriptions column={1} style={{ marginTop: '-22px' }}>
                    <ProDescriptions.Item key="visitors.visitorName" style={{ paddingLeft: '15%' }}>{'李斌斌'}</ProDescriptions.Item>
                    <ProDescriptions.Item key="visitors.visitorIdCard" label="住址">{'广东省佛山'}</ProDescriptions.Item>
                    <ProDescriptions.Item key="visitors.visitorPhone" label="身份证">{'735734759374432583'}</ProDescriptions.Item>
                    <ProDescriptions.Item key="visitors.visitorCompany" label="有效期">{'2026年***月10日'}</ProDescriptions.Item>
                  </ProDescriptions>
                </div>
                <Form {...layout} form={form} name="control-hooks" style={{ marginTop: '2%' }} onFinish={onFinish}>
                  <Form.Item className={styles.validation_button}>
                    <div>
                      <Button onClick={onReset}>
                        关闭
                      </Button>
                      <Divider type="vertical" />
                      <Divider type="vertical" />
                      <Button type="primary">
                        返回
                      </Button>
                    </div>
                  </Form.Item>
                </Form>
              </Card>
            </div>)}
        </Card>
      </GridContent>
    </>
  )
};

export default connect()(verification);